<template>
  <div class="addRepairLog">
    <el-dialog :visible.sync="centerDialogVisible"
               :close-on-click-modal="clickModalHide"
               :before-close="closeDialog" width="600px"
               title="新建维保记录">
      <div><span style="font-weight: bold">工装维保记录:</span></div>
      <wh-table :tableData="tableData" :tableLoading="tableLoading" :filterPage="false" :tableHeader="tableHeader" :option="option"
                style="margin-top: 5px"></wh-table>
      <fieldset class="field-class">
        <legend>维保项目</legend>
        <div style="float: left">
          <el-form label-position="right" label-width="80px" >
            <el-form-item :label="item.name" v-for="(item,index) in wbDicList " :key="index">
              <el-select v-model="item.value" filterable placeholder="请选择" :disabled="disabled">
                <el-option
                  v-for="(item,index) in selects"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div style="float: right">
          <span>备注</span>
          <el-input type="textarea" :disabled="disabled" :rows="3" v-model="wbLogDetail.remark"></el-input>
          <div style="margin-top: 20px;text-align: center;" v-show="!disabled">
            <el-button type="primary" @click="saveLog('')">保存&退出</el-button>
          </div>
          <div style="margin-top: 85%;text-align: center" v-show="!disabled">
            <el-button type="danger" @click="submitForm">提 交</el-button>
          </div>
        </div>
      </fieldset>
    </el-dialog>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";

  export default {
    name: 'addRepairLog',
    props: ['dataDetail'],
    data() {
      return {
        tableLoading:true,
        centerDialogVisible: false,
        clickModalHide: false,
        count: 0,
        isRepair: "1",
        repairData: {id:"",gzCode: "", repairMan: "", gzName: "", repairDate: ""},

        wbDicList:[],
        wbLogDetail:{id:"",wbId:"",remark:"",type:"",wbDicList:[],gzId:"",gzStatus:""},

        selects:[{label:"√",value:"0"},{label:"N",value:"1"},{label:"无",value:"2"}],

        tableData: [],
        tableHeader: [],
        option: {showOperate: false, headerCell: {background: 'rgb(108,198,236)', color: '#000000cc'}},
        disabled:false
      }
    },

    components: {
      whTable
    },
    mounted() {
      this.setTableHeader();
      this.getDicList();
    },

    methods: {
      setTableHeader() {
        let self = this;
        self.tableHeader = [{"columnName": "produceCode", "coloumNameCn": "产品图号"},
          {"columnName": "productName", "coloumNameCn": "产品名称"},
          {"columnName": "gqName", "coloumNameCn": "工段"},
          {"columnName": "carType", "coloumNameCn": "车型"},
          {"columnName": "gzCode", "coloumNameCn": "工装编码"},
          {"columnName": "gzName", "coloumNameCn": "工装名称"},
        ];
      },

      saveLog(msg){
        let self = this;
        let tip =  msg?msg:"保存成功";
        if (self.count == 0) {
          self.$http({
            url: "/autoMonitor/repair/addWbLog",
            method: "post",
            data: JSON.stringify(self.wbLogDetail),
            dataType: 'json',
            contentType: "application/json",
          }).then(resp => {
            if (resp.success) {
              if(self.wbLogDetail.type == '1'){
                self.$eventBus.$emit("updateGzWbDetail");
              }
              self.closeDialog();
              self.$notify({
                title: '提示',
                message: tip,
                type: 'success'
              });
            }else{
              self.$notify({
                title: '提示',
                message:"操作失败",
                type: 'error'
              });
            }
            self.wbLogDetail.type = "";
            this.count--;
          });
          this.count++;
        }
      },

      submitForm() {
        let self = this;
        for(let wb of self.wbDicList){
          if(!wb.value){
            self.$notify({
              title: '提示',
              message: "请完善维保项！",
              type: 'error'
            });
            return;
          }
        }
        self.wbLogDetail.wbStatus = '2';
        self.wbLogDetail.type = "1";
        self.saveLog("提交成功");
      },

      //关闭弹窗
      closeDialog() {
        this.centerDialogVisible = false;
      },

      getDicList(){
        let self = this;
        self.$http({
          url: "/autoMonitor/repair/queryWbDicList",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            for(let data of resp.result){
               data.value = "";
            }
            self.wbDicList = resp.result;
          }
        });
      },

      getLogList(id){
        let self = this;
        self.$http({
          url: "/autoMonitor/repair/queryWbLogDetail",
          method: "post",
          params:{wbId:id}
        }).then(resp => {
          if (resp.success) {
            self.wbLogDetail.id = resp.result.id||"";
            self.wbLogDetail.remark = resp.result.remark||"";
            self.wbLogDetail.wbDicList = resp.result.wbDicList||[];
            for(let wb_1 of this.wbDicList){
              wb_1.value = "";
              for(let wb_2 of self.wbLogDetail.wbDicList){
                if(wb_2.id == wb_1.id){
                  wb_1.value = wb_2.value;
                }
              }
            }
            self.wbLogDetail.wbDicList = this.wbDicList;
          }
          delete self.wbLogDetail.wbStatus;
        });
      },

    },
    watch: {
      dataDetail(val) {
        let self = this;
        self.disabled = (val.wbStatus == '2'||val.wbStatus =='1')?true:false;
        self.repairData = val;
        self.wbLogDetail.wbId = val.id;
        self.wbLogDetail.type = "";
        self.wbLogDetail.gzId = val.gzId;
        self.wbLogDetail.gzStatus = val.gzStatus == '4' ?'5':'2';
        self.getLogList(val.id);
        self.count = 0;
        self.centerDialogVisible = true;
        self.$nextTick(() => {
          self.tableData = [];
          self.tableData.push(val);
          self.tableLoading = false;
        })

      }
    }
  }
</script>
<style scoped>

  .addRepairLog .el-table--medium td, .addRepairLog .el-table--medium th {
      padding: 0px 0 ;
  }

  .addRepairLog .el-dialog__body{
    padding: 10px 20px;
  }
  .addRepairLog .field-class {
    margin-top: 20px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border-color: #efefef5e
  }

  .addRepairLog legend {
    padding: 5px 10px;
    font-weight: 800;
    /*background:white;*/
  }

  .addRepairLog ul {
    list-style-type: none;
    margin: 8px 0 4px 0;
  }

  .addRepairLog li {
    margin-top: 4px;
  }

  .addRepairLog .el-radio--medium.is-bordered {
    padding: 5px 6px 0px 3px;
    border-radius: 3px;
    height: 26px;
  }

  .addRepairLog .el-form--inline .el-form-item {
    margin-right: 0px;
  }

  .addRepairLog .el-form-item__label {
    font-size: 12px;
    padding: 0px 8px 0 0;
  }

  .addRepairLog .el-form-item__content {
    font-size: 11px;
  }

  .addRepairLog .el-input--medium {
    font-size: 11px;
  }

  .addRepairLog .el-input--medium .el-input__inner {
    height: 25px;
    line-height: 25px;
  }

  .addRepairLog .el-form-item {
    margin-bottom: 2px;
  }

  .addRepairLog .el-radio, .el-radio--medium.is-bordered .el-radio__label {
    font-size: 12px;
  }

  .addRepairLog .el-form-item--medium .el-form-item__content,.addRepairLog .el-form-item--medium .el-form-item__label{
    line-height: 30px;
  }

  .addRepairLog .el-dialog{
    margin-top: 9vh !important;
  }

  .addRepairLog .el-button--danger{
    padding: 6px 28px !important;
  }
</style>
